<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">设备测试</h2>
      <p class="text-gray-400">测试设备连接和性能</p>
    </div>
    
    <div class="space-y-6">
      <!-- 设备选择 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-cog mr-2"></i>设备测试配置
        </h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">选择设备</label>
            <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
              <option>测试服务器-001</option>
              <option>测试服务器-002</option>
              <option>Docker集群</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">测试类型</label>
            <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
              <option>连接测试</option>
              <option>性能测试</option>
              <option>压力测试</option>
              <option>稳定性测试</option>
            </select>
          </div>
        </div>
        
        <div class="mt-6 flex justify-center">
          <button class="cyber-button px-8 py-4 text-white rounded-xl hover-glow transition-all duration-300">
            <i class="fas fa-play mr-3"></i>开始测试
          </button>
        </div>
      </div>

      <!-- 测试结果 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-chart-line mr-2"></i>测试结果
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="text-center p-4 bg-green-900/20 rounded-lg border border-green-500/30">
            <div class="text-2xl font-bold text-green-400 mb-2">✓</div>
            <div class="text-green-400">连接测试</div>
            <div class="text-gray-400 text-sm">延迟: 2ms</div>
          </div>
          <div class="text-center p-4 bg-green-900/20 rounded-lg border border-green-500/30">
            <div class="text-2xl font-bold text-green-400 mb-2">✓</div>
            <div class="text-green-400">性能测试</div>
            <div class="text-gray-400 text-sm">得分: 8.5/10</div>
          </div>
          <div class="text-center p-4 bg-yellow-900/20 rounded-lg border border-yellow-500/30">
            <div class="text-2xl font-bold text-yellow-400 mb-2">!</div>
            <div class="text-yellow-400">稳定性测试</div>
            <div class="text-gray-400 text-sm">需关注</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 设备测试页面
</script>

